import * as THREE from '../../build/three.module.js';

import Stats from '../../jsm/libs/stats.module.js';

import { PLYLoader } from '../../jsm/loaders/PLYLoader.js';

// 全局变量
let mouseX = 0, mouseY = 0, halfX = innerWidth / 2, halfY = innerHeight / 2;

// 盒子纹理
const path = '../../textures/cube/Park3Med/';
const format = '.jpg';
const urls = [
  path + 'px' + format, path + 'nx' + format,
  path + 'py' + format, path + 'ny' + format,
  path + 'pz' + format, path + 'nz' + format,
]
const cubeTexture = new THREE.CubeTextureLoader().load( urls );
cubeTexture.mapping = THREE.CubeRefractionMapping;

// 场景
const scene = new THREE.Scene();
scene.background = cubeTexture;

// 相机
const camera = new THREE.PerspectiveCamera(45, innerWidth / innerHeight, 1, 10000);
camera.position.z = 4000;

// 渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(devicePixelRatio);
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

// 环境光
scene.add( new THREE.AmbientLight(0xffffff) );

// 点光源
const pl = new THREE.PointLight(0xffffff, 2);
scene.add(pl);
const sphere = new THREE.SphereBufferGeometry(10, 16, 8);
const plMesh = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial({ color: 0xffffff }),  );
pl.add(plMesh);

// 材质
const mtl1 = new THREE.MeshPhongMaterial({ color: 0xccddff, envMap: cubeTexture, refractionRatio: 0.98, reflectivity: 0.9 });
const mtl2 = new THREE.MeshPhongMaterial({ color: 0xccfffd, envMap: cubeTexture, refractionRatio: 0.985 });
const mtl3 = new THREE.MeshPhongMaterial({ color: 0xffffff, envMap: cubeTexture, refractionRatio: 0.98 });

// 加载几何体
new PLYLoader().load('../../models/ply/binary/Lucy100k.ply', geo => {

  geo.computeVertexNormals();

  const s = 1.2;

  const mesh1 = new THREE.Mesh(geo, mtl1);
  mesh1.scale.x = mesh1.scale.y = mesh1.scale.z = s;
  scene.add(mesh1);
  
  const mesh2 = new THREE.Mesh(geo, mtl2);
  mesh2.position.x = 1500;
  mesh2.scale.x = mesh2.scale.y = mesh2.scale.z = s;
  scene.add(mesh2);
  
  const mesh3 = new THREE.Mesh(geo, mtl3);
  mesh3.position.x = -1500;
  mesh3.scale.x = mesh3.scale.y = mesh3.scale.z = s;
  scene.add(mesh3);

});

const stats = new Stats();
document.body.appendChild( stats.dom );

// 渲染函数
const render = () => {

  const time = new Date() * 0.0002;

  // 控制相机
  camera.position.x += (- mouseX - camera.position.x) * 0.05;
  camera.position.y += (mouseY - camera.position.y) * 0.05;
  camera.lookAt(scene.position);

  // 点光源公转
  pl.position.x = 1500 * Math.cos(time);
  pl.position.y = 1500 * Math.sin(time);

  renderer.render(scene, camera);
}

// 驱动
const animate = () => {
  requestAnimationFrame(animate);

  render();
}
animate();

// 事件
const handleWindowResize = () => {
  halfX = innerWidth / 2;
  halfY = innerHeight / 2;

  camera.aspect = innerWidth / innerHeight;
  camera.updateProjectionMatrix();

  renderer.setSize(innerWidth / innerHeight);
}
window.addEventListener('resize', handleWindowResize, false);

const handleDocumentMousemove = e => {
  mouseX = (e.clientX - halfX) * 4;
  mouseY = (e.clientY - halfY) * 4;
}
document.addEventListener('mousemove', handleDocumentMousemove, false);